<template>
<h2>门店信息列表</h2>
门店名称<input type="text" placeholder="请输入门店名称" v-model="chaxun.ShopName"/>
门店电话<input type="text" placeholder="请输入门店电话" v-model="chaxun.ShopPhone"/>
<input type="button" value="查询" class="btn btn-primary" @click="NewRow"/>

<input type="button" value="添加优惠券" class="btn btn-primary" style="margin-left: 50px;" @click="DisAdd"/>
<table class="table table-bordered">
    <thead>
        <tr>
            <td>门店编号</td>
            <td>门店名称</td>
            <td>门店电话</td>
            <td>门店地址</td>
            <td>门店Logo</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in model">
            <td>{{ item.shopid }}</td>
            <td>{{ item.shopName }}</td>
            <td>{{ item.shopPhone }}</td>
            <td>{{ item.shopAddress }}</td>
            <td> <img :src="item.shopLogo" style="width: 50px;height: 50px"/> </td>
            <td>
                <a href="#" @click="Del(item.shopid)">删除</a>
            </td>
        </tr>
    </tbody>
</table>

共有{{ page.pagecount }}页,当前是{{ page.pageindex }}页,共有{{ page.totalcount }}条数据,
每页显示<select v-model="page.pagesize" @change="NewRow">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="5">5</option>
</select>条数据

<a href="#" @click="FPage(1)" style="margin-right: 10px;">首页</a>
<a href="#" @click="FPage(page.pageindex-1)" style="margin-right: 10px;">上一页</a>
<a href="#" @click="FPage(page.pageindex+1)" style="margin-right: 10px;">下一页</a>
<a href="#" @click="FPage(page.pagecount)" style="margin-right: 10px;">尾页</a>
<input type="text" style="width: 50px;" v-model="jump"/>
<input type="button" value="跳转" class="btn btn-primary" @click="jumppage"/>

</template>
<script setup lang="ts">

import { ref,onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';
const router=useRouter()
//门店信息实体
const model=ref([{
    shopid:0,
    shopName:'',
    shopPhone:'',
    shopAddress:'',
    shopLogo:''
}])
//分页所需数据
const page=ref({
    pageindex:1,
    pagesize:2,
    pagecount:0,
    totalcount:0
})

onMounted(()=>{
    ShopShow();
})
const chaxun=ref({
    ShopName:'',
    ShopPhone:''
})
//查询门店信息
const ShopShow=()=>{
    axios.get('https://localhost:7000/api/Shop/ShopShow',{
        params:{
            pageindex:page.value.pageindex,
            pagesize:page.value.pagesize,
            ShopName:chaxun.value.ShopName,
            ShopPhone:chaxun.value.ShopPhone
        }
    })
    .then(res=>{
        model.value=res.data.pdata;
        page.value.pagecount=res.data.pagecount;
        page.value.totalcount=res.data.totalcount;
    })
    .catch(err=>{
        console.log(err);
    })
}
//翻页
const FPage=(inde:number)=>{
    if(inde<1){
        alert('已经是首页了');
        return;
    }
    if(inde>page.value.pagecount){
        alert('已经是最后一页了');
        return;
    }
    page.value.pageindex=inde;
    ShopShow();
}
//设置每页行数
const NewRow=()=>{
    page.value.pageindex=1;
    ShopShow();
}
//跳转
const jump=ref(null);
const jumppage=()=>{
    if(jump.value==null){
        alert("请输入页码");
        return;
    }
     if(isNaN(jump.value)){
         alert("页码只能是数字");
        return;
     }
    if(jump.value<1){
        alert('页码值不能小于一')
        return
    }
    if(jump.value>page.value.pagecount){
        alert('页码值不能大于尾页')
        return
    }
    page.value.pageindex=jump.value;
    ShopShow();
}


//删除
const Del=(id:number)=>{
    if(confirm('确认删除吗?')){
        axios.delete('https://localhost:7000/api/Shop/ShopDel',{
        params:{
            id:id
        }
    })
    .then(res=>{
        if(res.data>0){
            alert("删除成功");
            NewRow();
        }
        else{
            alert("删除失败");
        }
    })
    .catch(err=>{
        console.log(err);
    })
    }
}

//跳转到优惠券新增
const DisAdd=()=>{
   router.push('/DiscountAdd')
}

</script>